<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>引入transform表单美化</title>
    <link rel="stylesheet" type="text/css" href="../../../resource/jqtransform/jqtransform.css" />

    <script type="text/javascript" src="../../../resource/jquery/jquery.min.1.7.2.js"></script>
    <script type="text/javascript" src="../../../resource/jqtransform/jquery.jqtransform.js"></script>
    <script type="text/javascript" src="js/form_component.js"></script>
</head>
<body>
<div id="example"></div>
<script>
    (function(){
        var obj=[
            {
                element:'input',
                label:'姓名',
                name:'user_name',
                id:'user_name',
                placeholder:'请填写您的姓名'
            },
            {
                element:'select',
                value:{'1':'一间','2':'2间','3':'三间'},
                label:'预定数量',
                name:'room_count',
                id:'room_count',
                placeholder:'房间数量'
            },
            {
                element:'textarea',
                label:'备注',
                name:'info',
                id:'info',
                rows:"6",
                cols:"30",
                placeholder:'备注信息'
            },
            {
                label:'电话',
                name:'user_phone',
                id:'user_phone',
                placeholder:'请填写您的电话'
            },
            {
                label:'电子邮件',
                name:'user_email',
                id:'user_email',
                placeholder:'请填写您的电子邮件'
            },
            {   element:'radio',
                label:'是否接收订单通知',
                value:['接收','不接收']
            },
            {
                element:'checkbox',
                label:'附带选择',
                value:{wifi:'wifi',water:'酒水'},
                id:'user_email'  //将会设置外层div id 用于筛选
            },
            {
                element:'radio',
                label:'性别',
                value:{'man':'男','woman':'女'},
                name:'sex',
                id:'user_email' //将会设置外层div id 用于筛选
            },
            {
                label:'上传照片',
                type:'file',
                name:'user_photo',
                id:'user_photo'
            },
            {
                label:'',
                type:'submit',
                name:'submit_order',
                id:'submit_order',
                value:'预定'
            }

        ];

        var formCom=new FormCom();
        var form= formCom.loadData(obj);
        $('#example').html(form).find('form').jqTransform();
    })();

</script>
</body>
</html>